import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ReactTooltip from 'react-tooltip';
import classnames from 'classnames';
import * as appPropTypes from './appPropTypes';
import { withRoomContext } from '../RoomContext';
import { Appear } from './transitions';
import Me from './Me';
import Peers from './Peers';
import NetworkThrottle from './NetworkThrottle';
import Countdown from './Countdown';

class Room extends React.Component {
	render() {
		const { amActiveSpeaker } =
			this.props;

		return (
			<Appear duration={300}>
				<div data-component="Room">
					<Peers style={{ opacity: 0 }} />

					<div
						className={classnames('me-container', {
							'active-speaker': amActiveSpeaker,
						})}
					>
						<Me />
					</div>

					{window.NETWORK_THROTTLE_SECRET && (
						<NetworkThrottle secret={window.NETWORK_THROTTLE_SECRET} />
					)}

					<ReactTooltip
						type="light"
						effect="solid"
						delayShow={100}
						delayHide={100}
						delayUpdate={50}
					/>

					<Countdown />
				</div>
			</Appear>
		);
	}

	componentDidMount() {
		const { roomClient } = this.props;

		roomClient.join();
	}
}

Room.propTypes = {
	roomClient: PropTypes.any.isRequired,
	room: appPropTypes.Room.isRequired,
	me: appPropTypes.Me.isRequired,
	amActiveSpeaker: PropTypes.bool.isRequired,
};

const mapStateToProps = state => {
	return {
		room: state.room,
		me: state.me,
		amActiveSpeaker: state.me.id === state.room.activeSpeakerId,
	};
};

const RoomContainer = withRoomContext(
	connect(mapStateToProps)(Room)
);

export default RoomContainer;
